Developer Academy: Belajar Dasar Pemrograman Web

4.86 •

Front-End Web,

React

Learning Path

Belajar Dasar Pemrograman Web

Teknologi:

Web

Level: Dasar - Pemula

Level: Dasar - Pemula 55 Jam Belajar

102.785

Siswa Terdaftar

Pelajari komponen-komponen dasar HTML, CSS, dan JavaScript yang merupakan fondasi utama untuk menjadi web developer.

Anda sudah lulus

Koridor kelas

Informasi kelas Lihat silabus

Learning Path Front-End Web Developer

Kelas ini merupakan langkah ke-satu Anda untuk menjadi Front-End Web Developer.

Langkah setelahnya

Langkah 2

Belajar Membuat Front-End Web untuk Pemula

46 Jam 4,84 Level Pemula

Learning Path React Developer

Kelas ini merupakan langkah ke-satu Anda untuk menjadi React Developer.

Langkah setelahnya

Langkah 2

Belajar Dasar Pemrograman JavaScript

45 Jam 4,85 Level Dasar

Apa yang akan Anda dapatkan

Sertifikat

Dapatkan sertifikat standar industri setelah menyelesaikan kelas ini.

Code Review

Kode yang Anda kerjakan akan di-review secara komprehensif oleh Reviewer.

Forum Diskusi

Diskusikan materi belajar dengan siswa lainnya.

Modul Tutorial

Materi bacaan elektronik disajikan dengan bahasa yang mudah dipahami.

Submission

Uji kemampuan teknis Anda dengan mengerjakan tugas submission.

Kode Interaktif

Modul belajar dalam bentuk video, disertai dengan latihan untuk menguji pemahaman.

Kuis

Kuis pilihan ganda membantu Anda memahami materi yang dipelajari.

Ujian

Validasi pengetahuan Anda dengan mengerjakan soal-soal ujian.

Level Dasar
Mempelajari materi yang berkenaan dengan topik tanpa perlu ada latar belakang khusus.

Level Pemula
Mempelajari topik dasar dengan objektif membuat produk, sistem, atau latihan sederhana.

Deskripsi

Website di era sekarang sudah menjadi kebutuhan utama yang tidak bisa diabaikan. Seluruh sektor bisnis atau edukasi dapat memanfaatkan website sebagai alat untuk promosi, tukar informasi, dan lainnya. Bedasarkan data dari World Wide Web Technology Surveys, dari seluruh website yang aktif, 88.2% menggunakan HTML, 95.6% menggunakan CSS dan 95% menggunakan JavaScript. Kelas ini membahas tuntas dasar HTML, CSS dan JavaScript sebagai tiga fondasi pembuatan website.

Web merupakan platform yang dapat diakses melalui banyak macam devices. Hal ini menjadi keuntungan jika Anda mengembangkan aplikasi berbasis Web.
Pengembangan web tidak membutuhkan komputer/laptop yang memiliki spesifikasi tinggi, sehingga tidak menjadi kendala bagi Anda yang tidak memiliki perangkat yang mumpuni.
Website adalah platform yang dijangkau oleh Search Engine seperti Google Search, sehingga website cocok sebagai media promosi bisnis atau konten.
Mengembangkan website termasuk pengembangan yang mudah di-maintenance dan mudah untuk dipublikasi.

Target dan Sasaran Siswa :

Kelas ditujukan bagi pemula yang ingin memulai karirnya di bidang web development (pembuatan web) dan membutuhkan dasar atau fondasi yang kuat sebelum belajar lebih dalam di bidang web, dengan mengacu pada standar internasional milik Google Developers.
Kelas dapat diikuti oleh siswa yang melek IT sehingga wajib memiliki dan dapat mengoperasikan komputer dengan baik.
Kelas ini didesain untuk pemula sehingga tidak ada prasyarat dalam pemahaman pemrograman sebelumnya.
Siswa harus bisa belajar mandiri, berkomitmen, benar-benar punya rasa ingin tahu, dan tertarik pada subjek materi, karena sebaik apa pun materi kelas ini, tidak akan berguna tanpa keseriusan siswa untuk belajar, berlatih, dan mencoba.

Tujuan Umum dan Khusus Pelatihan :

Di akhir pelatihan, peserta dapat membuat sebuah website sederhana menggunakan kode pemrograman yang sesuai standar global.
Membangun website menggunakan kode HTML, CSS, dan JavaScript sederhana.
Menerapkan struktur website yang baik menggunakan standar semantic HTML.
Mendemonstrasikan penyusunan layout website menggunakan teknik float atau flexbox.

Sembunyikan

Learning Path

Kelas ini merupakan langkah ke-satu Anda untuk menjadi Front-End Web Developer.

Langkah setelahnya

Langkah 2

Belajar Membuat Front-End Web untuk Pemula

46 Jam 4,84 Level Pemula

Peralatan Belajar

Spesifikasi minimal perangkat:

Prosesor

Intel Celeron (Rekomendasi Core i3 ke atas)

Tools yang dibutuhkan untuk belajar:

Web Browser (Google Chrome atau Mozilla Firefox)

Lihat semua peralatan belajar

Peralatan Belajar

Spesifikasi minimal perangkat

Kelas ini membutuhkan spesifikasi perangkat seperti berikut:

RAM

1GB

Layar

1366 x 768 (Rekomendasi Full HD 1920 x 1080)

Sistem Operasi

Windows, Linux, MacOS

Prosesor

Intel Celeron (Rekomendasi Core i3 ke atas)

Tools

Kelas ini membutuhkan beberapa tools berikut:

Web Browser (Google Chrome atau Mozilla Firefox)

Teks Editor (VSCode, Atom, atau Emacs)

Metode Ajar

Online - Self-paced Learning
- Total jam belajar : 55 jam
- Rekomendasi waktu belajar : 10 jam per minggu (selesai dalam 39 hari)
- Anda tentukan sendiri berapa lama waktu yang akan digunakan untuk belajar materi kelas ini selama masih aktif terdaftar pada kelas
Fasilitas Pengajaran
- Materi bacaan elektronik : Materi akan disajikan dalam bentuk teks dan bacaan
- Forum diskusi : Setiap kelas memiliki sebuah forum diskusi yang dapat Anda gunakan untuk bertanya dan berdikusi
- Evaluasi pembelajaran
  - Ujian akhir kelas
  - Submission (proyek akhir) berupa sebuah halaman website menggunakan teknik semantic HTML dan layouting
- Sertifikat kompetensi

Lihat semua metode ajar

Metode Ajar

Online - Self-paced Learning
- Total jam belajar : 55 jam
- Rekomendasi waktu belajar : 10 jam per minggu (selesai dalam 39 hari)
- Anda tentukan sendiri berapa lama waktu yang akan digunakan untuk belajar materi kelas ini selama masih aktif terdaftar pada kelas
Fasilitas Pengajaran
- Materi bacaan elektronik : Materi akan disajikan dalam bentuk teks dan bacaan
- Forum diskusi : Setiap kelas memiliki sebuah forum diskusi yang dapat Anda gunakan untuk bertanya dan berdikusi
- Evaluasi pembelajaran
  - Ujian akhir kelas
  - Submission (proyek akhir) berupa sebuah halaman website menggunakan teknik semantic HTML dan layouting
- Sertifikat kompetensi

Kontributor

Curriculum Developer yang membangun kelas ini:

Dimas Maulana Dwi Saputra

Curriculum Developer at Dicoding Indonesia

Reviewer

Code Reviewer yang akan me-review tugas dan kode Anda:

Bibita Habibi Mustafa

Product Development Engineer at Dicoding Indonesia

LINE API Expert
IoT Enthusiast

Ariska Hidayat

Code Reviewer External at Dicoding Indonesia

Unity Certified Developer (2017)
Research & Innovation Enthusiasm

Rizqy Hidayat

Product Engineer at Dicoding Indonesia

Fullstack web developer
@rizqyhi on GitHub/Twitter

Bagus Aji

Course Contributor at Dicoding

Programmer at CodePolitan

Moch Ridwan Taufik Alamsyah

External Code Reviewer at Dicoding Indonesia

"What We Learn When We Learn By Doing"

Currently as R&D Engineer at csacomputer.com

Full Stack Development Enthusiast
Mobile Development Enthusiast
Machine Learning Enthusiast

Lihat semua kontributor dan reviewer

Kontributor & Reviewer

Kontributor kelas

Curriculum Developer yang membangun kelas ini:

Dimas Maulana Dwi Saputra

Curriculum Developer at Dicoding Indonesia

Tim Reviewer

Code Reviewer yang akan me-review tugas dan kode Anda:

Bibita Habibi Mustafa

Product Development Engineer at Dicoding Indonesia

LINE API Expert
IoT Enthusiast

Ariska Hidayat

Code Reviewer External at Dicoding Indonesia

Unity Certified Developer (2017)
Research & Innovation Enthusiasm

Rizqy Hidayat

Product Engineer at Dicoding Indonesia

Fullstack web developer
@rizqyhi on GitHub/Twitter

Bagus Aji

Course Contributor at Dicoding

Programmer at CodePolitan

Moch Ridwan Taufik Alamsyah

External Code Reviewer at Dicoding Indonesia

"What We Learn When We Learn By Doing"

Currently as R&D Engineer at csacomputer.com

Full Stack Development Enthusiast
Mobile Development Enthusiast
Machine Learning Enthusiast

Buchori Rafsanjani

Curriculum Developer at Dicoding Indonesia

Unity Certified Associate

Widyarso Joko Purnomo

Toni Haryanto

Course Contributor at Dicoding

Chief Information Officer at CodePolitan

Khrisna dari Dicoding

Head of Reviewer at Dicoding Indonesia

Associate Android Developer

Ahmad Arif Faizin

Curriculum Developer at Dicoding Indonesia

Gilang Ramadhan

Curriculum Developer at Dicoding Indonesia

Nasrul Gunawan

External Code Reviewer at Dicoding Indonesia

Web & Mobile Enthusiast
UI/UX Enthusiast

Khofidin

IT & Traceability Manager at Austrex

Associate Android Developer
Farmer

Ahmad dari Dicoding

Managing Editor at Dicoding Indonesia

Associate Android Developer

Luthfi Alfarisi

External Code Reviewer at Dicoding Indonesia

Associate Android Developer
Android & Web Enthusiast

Agista Septiyanto

Code Reviewer at Dicoding Indonesia

Associate Android Developer

Alvin Indra Pratama

External Code Reviewer at Dicoding Indonesia

Front End Web Developer

Alfian Yusuf Abdullah

Code Reviewer at Dicoding Indonesia

Associate Android Developer
Kotlin Enthusiast
UI/UX Enthusiast

khairul anas

External Code Reviewer at Dicoding Indonesia

• Dicoding Graduate

• Flutter Developer

Fahmi Jabbar

External Code Reviewer at Dicoding Indonesia

dos:d9943e975917e132717d84bd294f382c20211021142543.png Certified TensorFlow Developer

Dimas Maulana Dwi Saputra

Curriculum Developer at Dicoding Indonesia

Mobile and Web Enthusiast
Associate Android Developer
React Developer
AWS Certified Cloud Practitioner

Alexzander Purwoko Widiantoro

Code Reviewer at Dicoding Indonesia

Associate Android Developer
Microsoft Certified: Azure Fundamental
Android, Web & IoT Enthusiast

Lukman Bahar Agung Pambudi

External Code Reviewer at Dicoding Indonesia

Freelance Practitioner
Full Stack Software Developer

Ni Luh Putu Anita Dewi

Nosef Nunggaran

External Code Reviewer at Dicoding Indonesia

AWS Certified Cloud Practitioner
Alibaba Certified Associate Cloud Computing

Ananda Dwi Prayoga

External Code Reviewer at Dicoding Indonesia

Fullstack Web Dev
Fullstack Android Dev
UI/UX enthusiast

Muhammad Nazar Alwi

External Code Reviewer at Dicoding Indonesia

Software Engineering Student
Dicoding Graduate
iOS Developer

Shaddam Amru Hasibuan

Developer Specialist at SMEsHub Indonesia

Javascript/React Developer
Google Cloud Architect
AR/VR Enthusiast

Muhammad Ilham Adhim

Front-End Web Developer

Muhammad Rifki Erlangga

External Code Reviewer at Dicoding Indonesia

Front-end Web Developer

Tatang Kuswandi

External Code Reviewer at Dicoding Indonesia

Mobile and Web Enthusiast

Samodra

External Code Reviewer at Dicoding Indonesia

Front-End Web Developer

Muhammad Amru Salim

External Code Reviewer at Dicoding Indonesia

Mobile and Web Enthusiast

Yusril Adriansyah Putra

External Code Reviewer at Dicoding Indonesia

Front-End Web Developer
Back-End Web Developer
Javascript Enthusiast

Yudistira Arya Mutamang

External Code Reviewer at Dicoding Indonesia

Front-End Web Developer
Cyber Security Enthusiast

Ilham Shiddiq

External Code Reviewer at Dicoding Indonesia. Backend Developer at a company in Bandung.

Back-End Web Developer
Web Developing Enthusiast

Rully Indra Laelaningrum

Product Engineer at Dicoding Indonesia

Muhammad Alvino Dienova

External Reviewer at Dicoding Indonesia

Front-End Web Developer

Tia Dwi Setiani

Curriculum Developer at Dicoding Indonesia

Certified Tensorflow Developer

Marcello Sebastian

External Code Reviewer at Dicoding Indonesia

Front-end Development Enthusiast
AWS Certified Solutions Architect – Associate

Sofyan Egi Lesmana

Informatics Engineering Student at Pasundan University

• External Code Reviewer

• Front-End Web Enthusiast

Farida Aidah

Product Engineer @ Dicoding Indonesia

"hello fafa"

Refiandi Reza Syawaldriyansah

External Reviewer Dicoding

I used to be a petroleum engineer. I loved it but didn't have passion on it. So i try to look for another opportunity, and here i am. I like to code and i have a passion in web developer especially as a front end developer. I got the certification as Front End Web Developer Expert from Dicoding Academy Indonesia. Now i'm focus on becoming a React JS developer. I have a dream to become a Fullstack Engineer and Mobile Developer Engineer.

Dimas Catur Wibowo

Code Reviewer at Dicoding Indonesia

Associate Android Developer

Bibita Habibi Mustafa

Product Development Engineer at Dicoding Indonesia

LINE API Expert
IoT Enthusiast

Ariska Hidayat

Code Reviewer External at Dicoding Indonesia

Unity Certified Developer (2017)
Research & Innovation Enthusiasm

Rizqy Hidayat

Product Engineer at Dicoding Indonesia

Fullstack web developer
@rizqyhi on GitHub/Twitter

Bagus Aji

Course Contributor at Dicoding

Programmer at CodePolitan

Moch Ridwan Taufik Alamsyah

External Code Reviewer at Dicoding Indonesia

"What We Learn When We Learn By Doing"

Currently as R&D Engineer at csacomputer.com

Full Stack Development Enthusiast
Mobile Development Enthusiast
Machine Learning Enthusiast

Buchori Rafsanjani

Curriculum Developer at Dicoding Indonesia

Unity Certified Associate

Widyarso Joko Purnomo

Toni Haryanto

Course Contributor at Dicoding

Chief Information Officer at CodePolitan

Khrisna dari Dicoding

Head of Reviewer at Dicoding Indonesia

Associate Android Developer

Ahmad Arif Faizin

Curriculum Developer at Dicoding Indonesia

Gilang Ramadhan

Curriculum Developer at Dicoding Indonesia

Nasrul Gunawan

External Code Reviewer at Dicoding Indonesia

Web & Mobile Enthusiast
UI/UX Enthusiast

Khofidin

IT & Traceability Manager at Austrex

Associate Android Developer
Farmer

Ahmad dari Dicoding

Managing Editor at Dicoding Indonesia

Associate Android Developer

Luthfi Alfarisi

External Code Reviewer at Dicoding Indonesia

Associate Android Developer
Android & Web Enthusiast

Agista Septiyanto

Code Reviewer at Dicoding Indonesia

Associate Android Developer

Alvin Indra Pratama

External Code Reviewer at Dicoding Indonesia

Front End Web Developer

Alfian Yusuf Abdullah

Code Reviewer at Dicoding Indonesia

Associate Android Developer
Kotlin Enthusiast
UI/UX Enthusiast

khairul anas

External Code Reviewer at Dicoding Indonesia

• Dicoding Graduate

• Flutter Developer

Fahmi Jabbar

External Code Reviewer at Dicoding Indonesia

dos:d9943e975917e132717d84bd294f382c20211021142543.png Certified TensorFlow Developer

Dimas Maulana Dwi Saputra

Curriculum Developer at Dicoding Indonesia

Mobile and Web Enthusiast
Associate Android Developer
React Developer
AWS Certified Cloud Practitioner

Alexzander Purwoko Widiantoro

Code Reviewer at Dicoding Indonesia

Associate Android Developer
Microsoft Certified: Azure Fundamental
Android, Web & IoT Enthusiast

Lukman Bahar Agung Pambudi

External Code Reviewer at Dicoding Indonesia

Freelance Practitioner
Full Stack Software Developer

Ni Luh Putu Anita Dewi

Nosef Nunggaran

External Code Reviewer at Dicoding Indonesia

AWS Certified Cloud Practitioner
Alibaba Certified Associate Cloud Computing

Ananda Dwi Prayoga

External Code Reviewer at Dicoding Indonesia

Fullstack Web Dev
Fullstack Android Dev
UI/UX enthusiast

Muhammad Nazar Alwi

External Code Reviewer at Dicoding Indonesia

Software Engineering Student
Dicoding Graduate
iOS Developer

Shaddam Amru Hasibuan

Developer Specialist at SMEsHub Indonesia

Javascript/React Developer
Google Cloud Architect
AR/VR Enthusiast

Muhammad Ilham Adhim

Front-End Web Developer

Muhammad Rifki Erlangga

External Code Reviewer at Dicoding Indonesia

Front-end Web Developer

Tatang Kuswandi

External Code Reviewer at Dicoding Indonesia

Mobile and Web Enthusiast

Samodra

External Code Reviewer at Dicoding Indonesia

Front-End Web Developer

Muhammad Amru Salim

External Code Reviewer at Dicoding Indonesia

Mobile and Web Enthusiast

Yusril Adriansyah Putra

External Code Reviewer at Dicoding Indonesia

Front-End Web Developer
Back-End Web Developer
Javascript Enthusiast

Yudistira Arya Mutamang

External Code Reviewer at Dicoding Indonesia

Front-End Web Developer
Cyber Security Enthusiast

Ilham Shiddiq

External Code Reviewer at Dicoding Indonesia. Backend Developer at a company in Bandung.

Back-End Web Developer
Web Developing Enthusiast

Rully Indra Laelaningrum

Product Engineer at Dicoding Indonesia

Muhammad Alvino Dienova

External Reviewer at Dicoding Indonesia

Front-End Web Developer

Tia Dwi Setiani

Curriculum Developer at Dicoding Indonesia

Certified Tensorflow Developer

Marcello Sebastian

External Code Reviewer at Dicoding Indonesia

Front-end Development Enthusiast
AWS Certified Solutions Architect – Associate

Sofyan Egi Lesmana

Informatics Engineering Student at Pasundan University

• External Code Reviewer

• Front-End Web Enthusiast

Farida Aidah

Product Engineer @ Dicoding Indonesia

"hello fafa"

Refiandi Reza Syawaldriyansah

External Reviewer Dicoding

Dimas Catur Wibowo

Code Reviewer at Dicoding Indonesia

Associate Android Developer

Testimoni Siswa

Ribuan siswa sukses belajar di Dicoding Academy. Apa kata mereka? Berikut adalah testimoni asli mereka.

Indah Astyaningrum

PT. Televisi Transformasi Indonesia

Belajar Dasar Pemrograman Web

Belajar pemprograman di dicoding sangat mudah di pahami serta materi dan latihannya juga menarik.

Baca selengkapnya

Bagus Nafian Tomi

PT. JPC Indonesia

Belajar Dasar Pemrograman Web

Sangat pas sekali untuk yang baru mulai belajar web programming karena materi diberikan secara tertulis sehingga jika ada yang lupa atau belum paham tinggal mencari materinya dan dibaca lagi (sangat merepotkan sekali bukan jika berupa video).

Baca selengkapnya

Lihat semua testimoni

Testimoni Siswa

Indah Astyaningrum

PT. Televisi Transformasi Indonesia

Belajar Dasar Pemrograman Web

Belajar pemprograman di dicoding sangat mudah di pahami serta materi dan latihannya juga menarik.

Bagus Nafian Tomi

PT. JPC Indonesia

Belajar Dasar Pemrograman Web

Sangat pas sekali untuk yang baru mulai belajar web programming karena materi diberikan secara tertulis sehingga jika ada yang lupa ato belum paham tinggal mencari materinya dan dibaca lagi (sangat merepotkan sekali bukan jika berupa video)

Enny Sriwi Juita Siahaan

DataOn

Belajar Dasar Pemrograman Web

Saya punya background kuiah bidang IT, dari awal saya tidak suka pelajaran CSS & Javaascript karena tidak menarik. Tapi setelah belajar disini ternyata menarik juga, saya jadi lebih mengerti pemakaian CSS & JavaScript, padahal dulu ga suka ngoding sama sekali. Tengkyu dicoding ({})

Putu Heri Setiawan

PT. Sumber Alfaria Trijaya Tbk

Belajar Dasar Pemrograman Web

Materi Pemrograman Web Dasar ini sangat mudah dipelajari. Senang rasanya bisa menyelesaikan semua materinya, tim reviewer nya juga responnya sangat cepat dalam mereview tugas submission. Dicoding Mantap....

Punya pertanyaan seputar kelas ini?

Berikut adalah beberapa pertanyaan yang paling sering ditanyakan.

Bagaimana cara memasukkan token Academy? Aturan membuat pertanyaan di forum diskusi kelas Bagaimana cara mencetak sertifikat kelulusan kelas?

Lihat semua FAQ

Anda sudah lulus

Silabus

Koridor kelas

Silabus

Materi yang akan Anda pelajari pada kelas ini.

Persiapan Belajar

Memahami HAKI, mekanisme belajar, forum diskusi, glosarium, dan daftar referensi.

2 Artikel

20 menit

Persetujuan Hak Cipta
5 Menit
Pengenalan Kelas
15 Menit

Pendahuluan

Pengenalan mengenai website, apa itu website, tools dalam mengembangkan sebuah website.

5 Artikel
1 Ujian

80 menit

Pengenalan HTML

Memberikan pemahaman fungsi HTML dalam website, memahami struktur dasar HTML dengan mencoba membuat sebuah halaman HTML sederhana.

4 Artikel
1 Ujian

70 menit

Pengenalan ke HTML
5 Menit
Membuat berkas HTML Pertama
15 Menit
Struktur Dasar HTML
15 Menit
Identifikasi Elemen pada Halaman Website
20 Menit
Kuis Sub-modul Pengenalan HTML
15 Menit

Pendalaman HTML

Belajar mengorganisir konten dengan elemen semantik yang ada, mengenal attribute pada HTML, mengenal paragraf, header, gambar, list, dan elemen teks lainnya. Memahami perbedaan inline dan block elemen.

25 Artikel
1 Ujian

405 menit

HTML lebih Dalam
5 Menit
Atribut HTML
15 Menit
Paragraf
10 Menit
Heading
10 Menit
List
15 Menit
Menambahkan List pada Halaman Profil
10 Menit
Gambar
15 Menit
Menambahkan Gambar pada Halaman Profil
25 Menit
Teks Terformat
25 Menit
Anchor, Emphasized Text, Important Text, dan Short Quotation
20 Menit
Citation, Defining Terms, Subscript, Superscript, Highlighted Text, dan Line Break
20 Menit
Menerapkan Anchor pada Navigasi Halaman Profil
20 Menit
Semantic HTML - Mengorganisasikan Halaman Konten
5 Menit
Header, Footer, Main dan Nav
15 Menit
Articles, Aside, dan Section
15 Menit
Generic Element
15 Menit
Mengorganisasikan Konten pada Halaman Profil
15 Menit
Menetapkan Elemen Header, Main, dan Footer
20 Menit
Menggunakan Div, Aside, Article, dan Section pada Konten
40 Menit
Table
5 Menit
Struktur Dasar Sebuah Tabel
15 Menit
Spanning Cell
20 Menit
Elemen dan Atribut pada Tabel
5 Menit
Menerapkan Elemen Tabel pada Halaman Profil
20 Menit
Special Character
10 Menit
Kuis Sub-modul Pendalaman HTML
15 Menit

Pengenalan CSS

Memahami peran CSS dalam pembuatan website, benefit menerapkan CSS dan mengetahui penulisan sintaks dasar CSS dengan menerapkan beberapa basic styling pada elemen HTML.

10 Artikel
1 Ujian

110 menit

Pengenalan ke Styling
5 Menit
Keuntungan dan Cara Kerja CSS
5 Menit
Memberikan Markup pada Dokumen
5 Menit
Menuliskan Aturan Styling
10 Menit
Melampirkan Styling pada Dokumen HTML
10 Menit
Menerapkan Styling Dasar pada Halaman Profil
5 Menit
Membuat Berkas CSS
10 Menit
Menulis Rules pada Berkas CSS
15 Menit
Menghubungkan Berkas CSS dengan HTML
10 Menit
CSS Conception
20 Menit
Kuis Sub-modul Pengenalan CSS
15 Menit

Pendalaman CSS

Memahami lebih dalam mengenai selector CSS, memahami penerapan styling untuk font dan text (mengubah tipe dan ukuran font, mengubah warna teks, dsb.), memahami tentang foreground color dan background color, memahami konsep box model, dan layouting menggunakan float. Di akhir materi ini kita sudah dapat membuat satu halaman profil dengan menerapkan semantic struktur, styling, dan layouting menggunakan float.

48 Artikel
1 Ujian

920 menit

Styling lebih Dalam
5 Menit
Selector Basic, Type Selector, dan Class Selector
25 Menit
ID Selector, Attribute Selector, dan Universal Selector
25 Menit
Combinators: Adjacent SIbling Selector dan General Sibling Selector
25 Menit
Combinators: Child Selector dan Descendant Selector
25 Menit
Pseudo Selector
35 Menit
Formatting Text (Text dan Font Styling)
5 Menit
Memilih Jenis dan Ukuran Font
25 Menit
Font Weight, Font Style, Font Variant, dan Shorthand
15 Menit
Text Styling: Line Height, Text Indent, dan Text Alignment
20 Menit
Text Styling: Text Decoration, Text Transform, Text Spacing, dan Text Shadow
20 Menit
Menerapkan Font Styling pada Halaman Profil
5 Menit
Menggunakan Font dari Google Font
40 Menit
Menetapkan Ukuran, Ketebalan, dan Perataan Teks pada Halaman Profil
30 Menit
Color
5 Menit
Menetapkan Nilai Warna
25 Menit
Text dan Background Color
20 Menit
Box Model
5 Menit
Box Element
5 Menit
Box Dimensions
40 Menit
Border
35 Menit
Padding
20 Menit
Margin
15 Menit
Centering Content
15 Menit
Display Roles
15 Menit
Box Shadow
15 Menit
Rounded Corner
15 Menit
Menerapkan Box Model pada Halaman Profil
5 Menit
Menetapkan ukuran pada gambar
20 Menit
Menerapkan Card Style pada Elemen Article
20 Menit
Menerapkan Jumbotron dan Navigasi pada Header
20 Menit
Menyesuaikan Padding dan Margin pada Body dan Elemen Main
15 Menit
Positioning
5 Menit
Perbedaan Static Flow dan Non-Static Flow
15 Menit
Normal Flow
15 Menit
Relative Positioning
15 Menit
Absolute Positioning
20 Menit
Fixed Positioning
15 Menit
Floating
20 Menit
Permasalahan Penerapan Float
15 Menit
Clear Property
15 Menit
Teknik Overflow
15 Menit
Menerapkan Positioning dan Float pada Halaman Profil
5 Menit
Menetapkan Float pada Content dan Aside
35 Menit
Menambahkan meta tag viewport
30 Menit
Media Query
50 Menit
Membuat Sticky Navigation
15 Menit
Memperbaiki CSS
10 Menit
Kuis Sub-modul Pendalaman CSS
15 Menit

Layout Responsif Menggunakan Flexbox

Memahami tentang penggunaan flexbox sebagai layout dasar membangun kalkulator berbasis website. Flex merupakan teknik baru dalam menyusun layout yang responsif, dan dapat dikombinasikan dengan media query agar lebih optimal ketika diakses menggunakan mobile devices.

10 Artikel
1 Ujian

245 menit

Perkenalan Layout Responsif menggunakan Flexbox
5 Menit
Flexible Box Model
5 Menit
Flex Container
15 Menit
Flex Grow
15 Menit
Flex Direction
20 Menit
Flexible Basis
20 Menit
Latihan - Membuat Layout Kalkulator : Membuat Struktur HTML Kalkulator
40 Menit
Latihan - Menerapkan Flexbox pada Halaman Kalkulator
40 Menit
Latihan - Mempercantik Tampilan Kalkulator
40 Menit
Tampilan Responsif pada Mobile
30 Menit
Kuis Sub-modul Layout Responsif menggunakan Flexbox
15 Menit

JavaScript Basic dan Manipulasi DOM

Memahami peran JavaScript dalam pengembangan website, menuliskan sintaks dasar JavaScript, memahami dasar JavaScript seperti statement, comment, variabel, tipe data, dsb. Mengetahui Browser Object dan event yang ada, dan memanipulasi DOM menggunakan JavaScript. Di akhir materi ini kita akan menerapkan logika pada proyek kalkulator berbasis website sehingga kalkulator dapat berfungsi dengan baik.